/** * Copyright (c) 2020 kedacom * OpenATC is licensed under Mulan PSL v2. * You
can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at: *
http://license.coscl.org.cn/MulanPSL2 * THIS SOFTWARE IS PROVIDED ON AN "AS IS"
BASIS, WITHOUT WARRANTIES OF ANY KIND, * EITHER EXPRESS OR IMPLIED, INCLUDING
BUT NOT LIMITED TO NON-INFRINGEMENT, * MERCHANTABILITY OR FIT FOR A PARTICULAR
PURPOSE. * See the Mulan PSL v2 for more details. **/
<template>
  <PatternConfig
    :agentids="agentids"
    :opt="opt"
    :isShowSingle="isShowSingle"
    :tableColums="tableColums"
    :isSingleCrossMode="isSingleCrossMode"
    :isShowTableHeader="isShowTableHeader"
    ref="pattern_config"
    id="pattern_config"
    :isOnlyOneTab="isOnlyOneTab"
    :isAllowedExpand="isAllowedExpand"
  ></PatternConfig>
</template>

<script>
import openatcComponents from 'openatc-components'

export default {
  name: 'patternConfig',
  data () {
    return {
      activeName: 'first',
      isShowSingle: true,
      isOnlyOneTab: true,
      isAllowedExpand: true,
      isSingleCrossMode: false,
      isShowTableHeader: true,
      tableColums: [],
      agentids: [],
      opt: {}
    }
  },
  components: {
    // Messagebox
  },
  props: {
    schemeData: {
      type: Array
    }
  },
  watch: {
    schemeData: {
      // @ts-ignore
      handler: function (val) {
      },
      deep: true
    }
  },
  created () {
    // test
    console.log('onPatternConfig created, add message addEventListener')
    window.addEventListener(
      'message',
      this.onMessageReceived,
      false
    )
  },
  beforeDestroy () {
    console.log('beforeDestroy')
    // 卸载监听
    window.removeEventListener('message', this.onMessageReceived, false)
  },
  methods: {
    onMessageReceived (event) {
      let _this = this
      // 接收到容器页面传递到数据
      console.log('event: ', event)
      // @ts-ignore
      const params = event.data
      if (params.method && params.method === 'init') {
        const config = params.config
        if (config) {
          _this.initConfig(config)
        }
        const data = params.data
        if (data && data.agentids) {
          if (!data.opt || !data.opt.optPatternList || data.opt.optPatternList.length === 0) {
            const list = data.agentids.map(item => {
              const res = {
                agentid: item,
                patternid: 1,
                isused: true
              }
              return res
            })
            data.opt = {
              optPatternList: [
                {
                  name: '仿真实例 1',
                  devs: list
                }
              ]
            }
          }
          _this.init(data)
        }
      }
      if (params.method && params.method === 'getPatternConfig') {
        // @ts-ignore
        let config = _this.getPatternConfig()
        let rest = {
          method: 'getPatternConfig',
          res: config
        }
        // @ts-ignore
        window.top.postMessage(rest, '*')
      }
    },
    initConfig (config) {
      const prefix = config.prefix || ''
      const token = config.token
      const host = config.host
      if (openatcComponents) {
        token && openatcComponents.func.setToken(token, prefix)
        host && openatcComponents.func.setHost(host)
      }
      this.isShowSingle = config.isShowSingle
      this.isOnlyOneTab = config.isOnlyOneTab
      this.isSingleCrossMode = config.isSingleCrossMode
      if (config.isAllowedExpand === false) {
        this.isAllowedExpand = config.isAllowedExpand
      }
      if (config.isShowTableHeader === false) {
        this.isShowTableHeader = config.isShowTableHeader
      }
      if (config.tableColums && config.tableColums.length > 0) {
        this.tableColums = config.tableColums
      }
    },
    init (params) {
      this.agentids = params.agentids
      this.opt = params.opt
    },
    getPatternConfig () {
      // @ts-ignore
      const res = this.$refs.pattern_config.getPatternConfig()
      return res
    }
  }
}
</script>

<style lang="scss" scoped>

.patternConfig {
  // width: 800px;
  // height: 500px;
  // border: 1px solid red;
  width: 100%;
  height: 100%;
  // overflow: hidden;
  .row {
    flex: 1;
    overflow: auto;
    width: 100%;
    height: 100%;
  }
}
</style>
